<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="name">
      <el-input
        v-model="ruleForm.name"
        type="tetx"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="所属医院" prop="region">
      <el-select v-model="ruleForm.hospital" placeholder="请选择所属医院">
        <el-option label="木一医院" value="木一医院"></el-option>
        <el-option label="弘泰宠物医院医院" value="弘泰宠物医院医院"></el-option>
      </el-select>
    </el-form-item>
     <el-form-item label="性别" prop="sex">
      <el-select v-model="ruleForm.sex" placeholder="性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
     <el-form-item label="职位" prop="position">
      <el-select v-model="ruleForm.position" placeholder="请选择职位">
        <el-option label="医生" value="医生"></el-option>
        <el-option label="护士" value="护士"></el-option>
        <el-option label="院长" value="院长"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input
        v-model="ruleForm.phone"
        type="tetx"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input
        v-model="ruleForm.email"
        type="tetx"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="账户" prop="id">
      <el-input v-model="ruleForm.id" type="tetx" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="pass">
      <el-input
        v-model="ruleForm.pass"
        type="password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input
        v-model="ruleForm.checkPass"
        type="password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="describe">
      <el-input
        v-model="ruleForm.describe"
        type="tetx"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >注册并登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from "vue";
export default {
  data() {
    const validateId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        callback();
      }
    };
    const validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        callback();
      }
    };
    const validatedescribe = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入描述"));
      } else {
        callback();
      }
    };
    const validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("确认密码和密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      arr: [],
      ruleForm: {
        flag: "user",
        name: "",
        id: "",
        hospital:'',
        sex:'',
        position:'',
        loginTime:new Date().getTime(),
        describe: "",
        phone: "",
        email: "",
        pass: "",
        checkPass: "",
        flags:false,
      },
      rules: {
        describe: [{ validator: validatedescribe, trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
        id: [{ validator: validateId, trigger: "blur" }],
        name: [{ validator: validateName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },

  // computed:{
  //   panduan() {
  //     if(this.ruleForm.id.length < 6){
  //       //  this.ruleForm.flag  = 'doctor'
  //       return this.ruleForm.flag.replace('user','doctor')
  //     }
  //      return this.ruleForm.flag
  //   },
  // },
  methods: {
    submitForm(formName) {
       this.$store.commit('changeUserName',this.ruleForm.name)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let arr2 ;
          arr2 = JSON.stringify({
            phone: this.ruleForm.phone,
            name: this.ruleForm.name,
            id: this.ruleForm.id,
            flag: this.ruleForm.id.length < 6 ? this.ruleForm.flag : "doctor",
            email: this.ruleForm.email,
            describe: this.ruleForm.describe,
            password: this.ruleForm.pass,
            hospital: this.ruleForm.hospital,
            position: this.ruleForm.position,
            sex:this.ruleForm.sex,
          }); 
          localStorage.setItem(this.ruleForm.name, arr2);
           let a= localStorage.getItem(this.ruleForm.name);
      if (JSON.parse(a).password == this.ruleForm.pass) {
        this.ruleForm.flags = true;
      }
         
          this.$store.commit("changeUserFlag", this.ruleForm.flags);
          this.$store.commit("changeLoginTime", this.ruleForm.loginTime);
         
            alert("提交成功!");
          this.$router.push("/home");
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.el-select{
  width: 100%;
}

</style>

<style lang="less">
#app{
  height: 100%;
}
.pfather{
  height: 100%;
}
</style>
